<template>
	<!-- 兑换详情 -->
	<view class="exchange-detail">
		<nav-bar :title="i18n.exchange.detail" @_back="_back"/>
		<view class="container">
			<view class="detail-box">
				<view class="left-box">
					<text>{{i18n.exchange.time}}</text>
				</view>
				<view class="right-box">
					<text>{{info.created_time}}</text>
				</view>
			</view>
			<view class="detail-box">
				<view class="left-box">
					<text>{{i18n.exchange.balance}}</text>
				</view>
				<view class="right-box">
					<text>{{info.currency_name}}</text>
				</view>
			</view>
			<view class="detail-box">
				<view class="left-box">
					<text>{{i18n.exchange.quantity}}</text>
				</view>
				<view class="right-box">
					<text>{{info.value}}</text>
				</view>
			</view>
			<view class="detail-box">
				<view class="left-box">
					<text>{{i18n.exchange.commission}}</text>
				</view>
				<view class="right-box">
					<text>{{info.before}}</text>
				</view>
			</view>
			<view class="detail-box">
				<view class="left-box">
					<text>{{i18n.exchange.cash}}</text>
				</view>
				<view class="right-box">
					<text>{{info.after}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import { walletExchange_info } from '@/api/index.js'
	import { mapGetters } from 'vuex'
	export default {
		mixins: [minix],
		computed: {
			...mapGetters(['token']),
			i18n() {
				return this.$t('message');
			},
		},
		data() {
			return {
				info: {}
			}
		},
		onLoad(data) {
			this.loadList(data.id)
		},
		methods: {
			async loadList(id) {
				let {error, res} = await walletExchange_info({id: id, token: this.token});
				if (error) return;
				this.info = res || {};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchange-detail {
		.detail-box {
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
			.left-box {
				color: rgba(255, 255, 255, .54);
			}
			.right-box {
				color: #fff;
			}
		}
	}
</style>
